<template>
  <div class="level">
    <el-card class="avue_height">
      <el-button type="primary" @click="addLevel" style="margin-bottom:20px">新增会员等级</el-button>
      <avue-crud
        ref="crud"
        style="width:100%"
        :data="loadData"
        :option="tableOption"
        :table-loading="loading"
      >
        <template slot-scope="scope" slot="indexLabel">
          <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
          <el-button
            type="text"
            @click="switchs(scope.row)"
            :icon="scope.row.status == '01'?'el-icon-circle-close':'el-icon-circle-check'"
          >{{scope.row.status == '01'?'停用':'启用'}}</el-button>
          <el-button type="text" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
        </template>
      </avue-crud>
      <template>
        <div style="width:100%;position:relative;height:50px">
          <el-pagination
            :page-sizes="[10, 20,30,40, 50, 100]"
            :pager-count="7"
            :current-page="page.current"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin:2% 0;position:absolute;right:1%"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import {
  persongradefetchList,
  addObj,
  putObj,
  delObj,
  updateStatusById,
} from "@/api/shop/member/level.js";
export default {
  data() {
    const DIC = {
      status: [
        {
          label: "停用",
          value: "00",
        },
        {
          label: "启用",
          value: "01",
        },
      ],
      gradeRightsId: [
        {
          label: "积分权益",
          value: "00",
        },
        {
          label: "储值权益",
          value: "01",
        },
        {
          label: "会员等级权益",
          value: "02",
        },
      ],
      gradeId: [
        {
          value: "1",
          label: "LV1",
        },
        {
          value: "2",
          label: "LV2",
        },
        {
          value: "3",
          label: "LV3",
        },
        {
          value: "4",
          label: "LV4",
        },
        {
          value: "5",
          label: "LV5",
        },
        {
          value: "6",
          label: "LV6",
        },
        {
          value: "7",
          label: "LV7",
        },
        {
          value: "8",
          label: "LV8",
        },
        {
          value: "9",
          label: "LV9",
        },
        {
          value: "10",
          label: "LV10",
        },
      ],
    };
    return {
      dialogVisible: false,
      loading: false,
      page: {
        total: 0,
        size: 10,
        current: 1,
      },
      loadData: [],
      tableOption: {
        header: false,
        align: "center",
        editBtn: false,
        delBtn: false,
        menu: true,
        column: [
          {
            label: "序号",
            prop: "indexLabel",
            slot: true,
            width: 80,
          },
          {
            label: "会员等级",
            prop: "gradeLevel",
            dicData: DIC.gradeId,
            overHidden: true,
          },
          {
            label: "等级名称",
            prop: "gradeName",
            overHidden: true,
          },
          {
            label: "会员权益",
            prop: "gradeRightsId",
            dicData: DIC.gradeRightsId,
            overHidden: true,
          },
          {
            label: "创建人",
            prop: "operatorId",
          },
          {
            label: "创建时间",
            prop: "createTime",
            type: "datetime",
            format: "yyyy-MM-dd HH:mm",
            overHidden: true,
          },
          {
            label: "状态",
            prop: "status",
            dicData: DIC.status,
          },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      persongradefetchList(this.page).then((val) => {
        let data = val.data.data;
        this.page = {
          total: data.total,
          size: data.size,
          current: data.current,
        };
        this.loadData = data.records;
      });
    },
    sizeChange(size) {
      this.page.size = size;
      this.getList();
    },
    currentChange(current) {
      this.page.current = current;
      this.getList();
    },
    addLevel() {
      this.$router.push({ path: "/member/level/addLevel" });
    },
    edit(item) {
      this.$router.push({
        path: "/member/level/addLevel",
        query: { id: item.id },
      });
    },
    switchs(row) {
      if (row.status == "01") {
        this.$confirm(
          "会员等级禁用，属于此等级的会员不再享受等级权益，是否继续？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            updateStatusById(
              Object.assign({ status: "00", gradeId: row.gradeId })
            ).then((val) => {
              this.getList();
              this.$message({
                type: "success",
                message: "会员等级禁用成功!",
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消会员等级禁用",
            });
          });
      } else {
        updateStatusById(
          Object.assign({ status: "01", gradeId: row.gradeId })
        ).then((val) => {
          this.getList();
          this.$message({
            type: "success",
            message: "会员等级启用成功!",
          });
        });
      }
    },
    del(row) {
      var _this = this;
      this.$confirm(
        '是否确认删除会员等级名称为"' + row.gradeName + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delObj(row.id);
        })
        .then(() => {
          this.getList(this.page);
          _this.$message.success("删除成功");
        })
        .catch(function () {});
    },
  },
};
</script>

<style lang="scss" scoped>
</style>